<template>
    <div class="login-container">
        <el-card class="login-box">
            <h1 class="login-title">后台管理系统</h1>

            <el-form ref="loginForm" :model="loginForm">
                <!-- 用户名 -->
                <el-form-item prop="username">
                    <el-input v-model="loginForm.username" placeholder="请输入用户名" prefix-icon="User" clearable />
                </el-form-item>

                <!-- 密码 -->
                <el-form-item prop="password">
                    <el-input v-model="loginForm.password" placeholder="请输入密码" prefix-icon="Lock" show-password
                        clearable />
                </el-form-item>

                <!-- 登录按钮 -->
                <el-form-item>
                    <el-button type="primary" @click="onSubmit" style="width: 100%">
                        登录
                    </el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const userStore = useUserStore()

const form = ref({
  username: 'yang47',
  password: '123456'
})

// 表单验证
const validateForm = () => {
  if (!form.value.username.trim()) {
    ElMessage.warning('请输入用户名')
    return false
  }
  
  if (form.value.password.length < 6) {
    ElMessage.warning('密码长度不能少于6位')
    return false
  }
  
  return true
}

// 登录处理
const handleLogin = async () => {
  if (!validateForm()) return

  try {
    // 调用登录动作
    await userStore.login(form.value)
    
    // 登录成功处理
    ElMessage.success('登录成功')
    
    // 路由跳转（建议在Store的login动作中处理）
    const redirectPath = router.currentRoute.value.query.redirect || '/'
    await router.push(redirectPath)
    
  } catch (error) {
    // 登录失败处理
    ElMessage.error(error.message || '登录失败')
    
    // 清空密码字段
    form.value.password = ''
  }
}
</script>

<style scoped>
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(145deg, #f0f2f5 0%, #c1c3c7 100%);
}

.login-box {
    width: 400px;
    padding: 30px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.login-title {
    text-align: center;
    margin-bottom: 30px;
    color: #303133;
}
</style>